| Inline Elements | Block Elements |
|---|---|
| Do not start on a new line. | Start on a new line. |
| Only take up as much width as necessary. | Take up the full width available. |
| Examples: <span>, <a>, <img> | Examples: <div>, <h1>, <p> |
| Can be styled with CSS properties like padding and margin, but they do not affect the layout of other elements. | Can be styled with CSS properties like padding and margin, which can affect the layout of other elements. |
| Can be nested inside block elements. | Cannot be nested inside inline elements. |
| Height and width properties can not be set on them. | Height and width properties can be set on them. |
| Padding and margin properties can not be set on them. Only horizontal padding and margin can be set. | Padding and margin properties can be set on them. Both vertical and horizontal padding and margin can be set. |
Lorem ipsum dolor sit amet elit. Atque animi eum ratione sed suscipit iusto? Eum at eos saepe quia distinctio dignissimos veniam quo excepturi quasi a odit numquam eveniet eligendi cupiditate, recusandae aspernatur quae reiciendis quisquam sit non? Praesentium ducimus, ipsam rem amet veritatis eaque. Eos ad exercitationem aut.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus eaque laboriosam, facere excepturi magnam odio ducimus blanditiis impedit dolor consequuntur!